<template>
    <div>
        <div class="container">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                   <i class="el-icon-s-platform"></i> 发布
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <hr>
        <el-form ref="form" :model="form" label-width="200px">
            <el-form-item label="标题：" width="200">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="内容：">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item label="图片：">
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button class="pd" @click="onBack">取消</el-button>
                <el-button class="pd" type="primary" @click="onSubmit">发布</el-button>
            </el-form-item>
        </el-form>
        </div>
    </div>
</template>

<script>
import { fetchData } from '../../../api/index';
export default {
    name: 'basetable',
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            form: {
                name: '',
                desc: ''
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            fetchData(this.query).then(res => {
                console.log(res);
                this.tableData = res.list;
                this.pageTotal = res.pageTotal || 50;
            });
        },
        //取消
        onBack(){
            this.$router.back();
        },
        //提交
        onSubmit() {
            console.log('submit!');
        },
        //上传图片
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
};
</script>

<style scoped>
h3{
    margin: 10px 0px;
}
table{
    width: 80%;
    border-color: rgb(251, 251, 251);
    margin-top: 50px;
}
hr{
    margin-bottom: 50px;
}
.pd{
    padding: 10px 50px;
}
>>>.el-textarea__inner{
    width: 300px;
}
>>>.el-input--small .el-input__inner{
    width: 300px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
